<template>

    <el-menu
      active-text-color="#ffd04b"
      background-color="#545c64"
      class="el-menu-vertical-demo"
      :default-active="route.path"
  
      text-color="#fff"
    
    >
    <h3>后台管理页面</h3>
    <el-menu-item
    v-for="item in noChildren"
    :index="item.path"
    :key="item.path"
    @click="goToHanlder(item.path)"
    >
    <component class="icons" :is="item.icon"></component>
    <span>{{ item.label }}</span>
    </el-menu-item>
      
  
      <el-sub-menu
      v-for="item in hasChildren"
      :index="item.path"
      :key="item.path"
      >
        <template #title>
          <component class="icons" :is="item.icon"></component>
          <span>{{ item.label }}</span>
        </template>
        <el-menu-item-group >
          <el-menu-item 
          v-for="subItem in item.children"
          :index="subItem.path"
          :key="subItem.path"
          @click="() => router.push(subItem.path)"
          >
          <component class="icons" :is="subItem.icon"></component>
          <span>{{ subItem.label }}</span>
          </el-menu-item>
          
        </el-menu-item-group>
  
      </el-sub-menu>
  
    </el-menu>
  
  </template>
  
  
  <script setup>
  import {useRouter} from 'vue-router'
  import {ref ,computed} from 'vue'
  import {useRoute} from 'vue-router'
  
  const router = useRouter()
  
  const route = useRoute()
  
  
  const menus = ref([
  {
      path: '/index', 
      label: '首页' ,
      name: 'home' ,
      icon:'house' ,
  },
  {
      path: '/book', 
      name: 'book' ,
      label: '图书管理' ,
      icon:'notebook' ,
  },
  {
      path: '/user', 
      name: 'user' ,
      label: '用户管理' ,
      icon:'user' ,
  },
  {
      path: '/test', 
      name: 'test' ,
      label: '测试' ,
      icon:'test' ,
  },
  
  
  
  {
      path: '/other',
      label: '其它页面',
      icon:'location',
      children:[
          {
  
              path: '/other/page1',
              name:'page1' ,
              label:'页面一' ,
              icon:'setting',
              url:'PageOne'
          },
          {
              path: '/other/page2',
              name:'page2' ,
              label:'页面二' ,
              icon:'setting',
              url:'PageTwo'
          }
      
      ]
  
  }
  
  ])
  
  
  const goToHanlder = (path) => {
  return router.push(path)
  }
  
  
  //计算属性 
  
  // 将某个数据 进行计算操作后 返回一个新的数据
  // 里面写 你要操作的数据 返回的结果
  // 
  
  const noChildren = computed(() => menus.value.filter(item => !item.children) )
  
  const hasChildren = computed(() => menus.value.filter(item => item.children) )
  
  
  
  
  
  </script>
  
  <style scoped>
  .icons{
  width: 18px;
  height: 18px;
  
  margin-right: 5px;
  }
  
  .el-menu{
  border-right: none;
  height: 800px;
  width: 180px;
  
  
  }  
  
  h3{
  text-align: center;
  color: white;
  
  }
  </style>